<script setup>
import { ref, watch } from 'vue'
import ueMsg from '/public/js/app.js'

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  }
})
const active = ref(false)
const toolList = ref([
  { label: '供水管线', open: false, ueId: 'GSGX' },
  { label: '电力管线', open: false, ueId: 'GDGX' },
  { label: '建筑透明', open: false, ueId: 'JZTMH' },
  { label: '空调房间实体', open: false, ueId: 'KTSTH' },
  { label: '电力房间实体', open: false, ueId: 'DLSTH' },
])
const change = () => {
  if (active.value) {
    toolList.value.forEach(element => {
      element.open = false
      ueMsg.apiSend({ [element.ueId]: 0 })
    });
  }
  active.value = !active.value
  ueMsg.apiSend({ C2Break: active.value ? 1 : 0 })
}
const toolItemClk = (item) => {
  item.open = !item.open
  ueMsg.apiSend({ [item.ueId]: item.open ? 1 : 0 })
}

watch(() => props.isShow, val => {
  if (!val) {
    active.value = true
    change()
  }
})
</script>

<template>
  <div style="display: flex;" v-show="props.isShow">
    <div :class="['my-btn', { active }]" @click="change">
      楼层拆解
    </div>
    <div :class="['tool-item', { 'tool-active': item.open }]" v-for="(item, i) of toolList" :key="i" v-show="active"
      @click="toolItemClk(item)">
      {{ item.label }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-btn {
  padding: 0 80px;
  height: 56px;
  line-height: 56px;
  background-image: url(/imgs/50.png);
  background-size: 100% 100%;
  pointer-events: all;
  cursor: pointer;
  color: #fff;
  transition: all .3s;
  margin-right: 20px;
}

.active {
  background-image: url(/imgs/49.png);
}

.tool-item {
  padding: 0 40px;
  height: 56px;
  line-height: 56px;
  background-image: url(/imgs/48.png);
  background-size: 100% 100%;
  pointer-events: all;
  cursor: pointer;
  color: #fff;
  transition: all .3s;
  position: relative;
}

.tool-active {
  color: #1979BD;

  &::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    background-color: #1979BD;
  }
}
</style>